<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>微笑世界工作室</title>
        <link
            href="bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
            <div class="container">
                <a href="#" class="navbar-brand">微笑世界工作室</a>

                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navmenu"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navmenu">
                    <ul class="navbar-nav ms-auto">
                        <!--margin start = margin left-->
                        <li class="nav-item">
                            <div class="nav-link">最新活动</div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link">产品</div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link">关于我们</div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <section class="p-5 bg-dark text-light text-center text-sm-start">
            <!--padding -->
            <div class="container">
                <div class="d-flex">
                    <!--display flex-->
                    <div>
                        <h1>
                            我们想建立一个<span class="text-warning">微笑世界</span>
                        </h1>
                        <p class="my-4">
                            <!-- margin-top margin-bottom -->
                            Lorem ipsum, dolor sit amet consectetur adipisicing
                            elit. Doloremque corporis quo, similique perferendis
                            distinctio non eius consequuntur 
                        </p>
                        <button class="btn btn-primary btn-lg">
                            使用我们的产品
                        </button>
                    </div>
                    <img
                        src="./img/showcase.svg"
                        alt="showcase"
                        class="w-50 d-none d-md-block"
                    />
                </div>
            </div>
        </section>

        <section class="p-5 bg-primary text-light">
            <div class="container">
                <div
                    class="d-md-flex justify-content-between align-items-center"
                >
                    <h3 class="mb-3">现在注册账号开始使用</h3>
                    <div class="input-group news-input">
                        <input
                            type="text"
                            class="form-control"
                            placeholder="请输入你的邮箱"
                        />
                        <button class="btn btn-dark btn-lg">注册</button>
                    </div>
                </div>
            </div>
        </section>

        <section class="p-5">
            <div class="container">
                <div class="row g-4">
                    <!--gap-->
                    <div class="col-md">
                        <div class="card bg-dark text-light">
                            <div class="card-body text-center">
                                <div class="card-title">游戏</div>
                                <div class="card-text">
                                    提供休闲,即时策略,射击,益智,多人对战游戏等
                                </div>
                                <a href="./game/index.html" class="btn btn-primary mt-2"
                                    >立即体验</a
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="card bg-secondary text-light">
                            <div class="card-body text-center">
                                <div class="card-title">云微服务</div>
                                <div class="card-text">
                                    我们帮您建立网站,服务器
                                </div>
                                <a href="#" class="btn btn-dark mt-2"
                                    >立即使用</a
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="card bg-dark text-light">
                            <div class="card-body text-center">
                                <div class="card-title">云手机</div>
                                <div class="card-text">
                                    您的下一代手机,挂机游玩必备
                                </div>
                                <a href="#" class="btn btn-primary mt-2"
                                    >开始试用</a
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="p-5">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md">
                        <img src="img/1.svg" alt="1" class="img-fluid" />
                    </div>
                    <div class="col-md p-5">
                        <h2>工作室介绍</h2>
                        <p class="lead">
                            微笑世界工作室
                        </p>
                        <p>
                            微笑世界工作室成立2022年, 虽然我们很年轻, 但对于未来, 我们有无数种构想; 曾经那些看似遥不可及的可能; 现已被互联网的力量逐步实现。 
                        </p>
                        <a href="" class="btn btn-light">查看更多</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="p-5 bg-dark text-light">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md p-5">
                        <h2>我们的优势</h2>
                        <p class="lead">
                            Lorem ipsum, dolor sit amet consectetur adipisicing
                            elit. Praesentium ea ratione corporis et provident.
                            Quia!
                        </p>
                        <p>
                            Lorem, ipsum dolor sit amet consectetur adipisicing
                            elit. Amet nostrum, aperiam assumenda vitae, beatae
                            at sint quaerat consequatur maxime, hic voluptatum
                            ex. Dolor minus perferendis magni autem
                            exercitationem quis quos.
                        </p>
                        <a href="" class="btn btn-light">查看更多</a>
                    </div>

                    <div class="col-md">
                        <img src="img/2.svg" alt="1" class="img-fluid" />
                    </div>
                </div>
            </div>
        </section>

        <section class="p-5">
            <div class="container">
                <h2 class="text-center">常见问题</h2>
                <div
                    class="accordion accordion-flush"
                    id="accordionFlushExample"
                >
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingOne">
                            <button
                                class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseOne"
                                aria-expanded="false"
                                aria-controls="flush-collapseOne"
                            >
                               问题 #1
                            </button>
                        </h2>
                        <div
                            id="flush-collapseOne"
                            class="accordion-collapse collapse show"
                            aria-labelledby="flush-headingOne"
                            data-bs-parent="#accordionFlushExample"
                        >
                            <div class="accordion-body">
                                Placeholder content for this accordion, which is
                                intended to demonstrate the
                                <code>.accordion-flush</code> class. This is the
                                first item's accordion body.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingTwo">
                            <button
                                class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseTwo"
                                aria-expanded="false"
                                aria-controls="flush-collapseTwo"
                            >
                                问题 #2
                            </button>
                        </h2>
                        <div
                            id="flush-collapseTwo"
                            class="accordion-collapse collapse"
                            aria-labelledby="flush-headingTwo"
                            data-bs-parent="#accordionFlushExample"
                        >
                            <div class="accordion-body">
                                Placeholder content for this accordion, which is
                                intended to demonstrate the
                                <code>.accordion-flush</code> class. This is the
                                second item's accordion body. Let's imagine this
                                being filled with some actual content.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingThree">
                            <button
                                class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseThree"
                                aria-expanded="false"
                                aria-controls="flush-collapseThree"
                            >
                                问题 #3
                            </button>
                        </h2>
                        <div
                            id="flush-collapseThree"
                            class="accordion-collapse collapse"
                            aria-labelledby="flush-headingThree"
                            data-bs-parent="#accordionFlushExample"
                        >
                            <div class="accordion-body">
                                Placeholder content for this accordion, which is
                                intended to demonstrate the
                                <code>.accordion-flush</code> class. This is the
                                third item's accordion body. Nothing more
                                exciting happening here in terms of content, but
                                just filling up the space to make it look, at
                                least at first glance, a bit more representative
                                of how this would look in a real-world
                                application.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="p-5 bg-primary">
            <div class="container">
                <h2 class="text-center text-light">工作室成员</h2>
                <p class="lead text-center text-white mb-5">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    Hic, unde?
                </p>
                <div class="row g-4">
                    <div class="col-md-6 col-lg-3">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img src="img/01-man.jpeg" class="mb-3 rounded-circle"/>
                                <h3 class="card-title">张三</h3>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit. Accusamus, ratione!
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img src="img/02-man.jpeg" class="mb-3 rounded-circle"/>
                                <h3 class="card-title">张三</h3>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit. Accusamus, ratione!
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img src="img/03-man.jpeg" class="mb-3 rounded-circle"/>
                                <h3 class="card-title">张三</h3>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit. Accusamus, ratione!
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img src="img/01-man.jpeg" class="mb-3 rounded-circle"/>
                                <h3 class="card-title">张三</h3>
                                <p class="card-text">
                                    Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit. Accusamus, ratione!
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="p-5">
            <div class="container">
                <h2 class="text-center mb-4">联系我们</h2>

                <ul class="list-group list-group-flush">
                    <li class="list-group-item">地址：中国</li>
                  </ul>
            </div>
        </section>

        <footer class="p-5 bg-dark text-white text-center">
            <div class="container">
                <p class="lead">Copyright &copy; 2022 微笑世界工作室</p>
            </div>
        </footer>

        <script
            src="bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"
        ></script>
    </body>
</html>
